import { RadialBarChart, RadialBar, ResponsiveContainer, Text } from 'recharts';
import { WeatherData } from '@/types/data';

const tempGradient = [
  { offset: '0%', color: '#00E5FF' },
  { offset: '50%', color: '#FF0080' },
  { offset: '100%', color: '#FF8C00' }
];

export default function WeatherGauge({ data }: { data: WeatherData }) {
  const tempRange = data.temp_max - data.temp_min;
  const tempData = [
    { name: 'Current', value: data.temp_avg, fill: 'url(#tempGradient)' },
    { name: 'Range', value: tempRange, fill: '#333' }
  ];

  return (
    <div className="flex flex-col h-full">
      <h2 className="text-xl font-medium mb-4 font-['Google_Sans']">天气数据仪表盘</h2>
      <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="bg-gray-800 bg-opacity-60 rounded-xl p-4 border border-gray-700">
          <h3 className="text-lg mb-2 flex items-center">
            <span className="mr-2">🌡️</span>温度
          </h3>
          <div className="h-48">
            <ResponsiveContainer width="100%" height="100%">
              <RadialBarChart
                innerRadius="70%"
                outerRadius="90%"
                data={tempData}
                startAngle={180}
                endAngle={0}
              >
                <defs>
                  <linearGradient id="tempGradient" x1="0" y1="0" x2="1" y2="0">
                    {tempGradient.map((stop, i) => (
                      <stop key={i} offset={stop.offset} stopColor={stop.color} />
                    ))}
                  </linearGradient>
                </defs>
                <RadialBar dataKey="value" background />
                <Text 
                  x="50%" 
                  y="50%" 
                  textAnchor="middle" 
                  dominantBaseline="middle" 
                  fill="#fff"
                  className="text-2xl font-bold"
                >
                  {`${data.temp_avg}°C`}
                </Text>
              </RadialBarChart>
            </ResponsiveContainer>
          </div>
          <div className="flex justify-between mt-2 text-sm">
            <span className="text-blue-400">{data.temp_min}°C</span>
            <span className="text-orange-400">{data.temp_max}°C</span>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="bg-gray-800 bg-opacity-60 rounded-xl p-4 border border-gray-700">
            <h3 className="text-lg mb-2 flex items-center">
              <span className="mr-2">💧</span>湿度
            </h3>
            <div className="relative h-32">
              <div className="absolute bottom-0 w-full h-2 bg-gray-700 rounded-full">
                <div 
                  className="h-2 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full transition-all duration-500"
                  style={{ width: `${data.humidity}%` }}
                ></div>
              </div>
              <div className="absolute bottom-8 left-0 right-0 text-center">
                <span className="text-3xl font-bold text-blue-400">
                  {data.humidity.toFixed(1)}%
                </span>
              </div>
            </div>
          </div>

          <div className="bg-gray-800 bg-opacity-60 rounded-xl p-4 border border-gray-700">
            <h3 className="text-lg mb-2 flex items-center">
              <span className="mr-2">🌧️</span>降水量
            </h3>
            <div className="relative h-32">
              <div className="absolute bottom-0 w-full h-2 bg-gray-700 rounded-full">
                <div 
                  className="h-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full transition-all duration-500"
                  style={{ width: `${Math.min(data.rainfall * 5, 100)}%` }}
                ></div>
              </div>
              <div className="absolute bottom-8 left-0 right-0 text-center">
                <span className="text-3xl font-bold text-purple-400">
                  {data.rainfall}mm
                </span>
              </div>
              {data.rainfall > 0 && (
                <div className="absolute top-0 left-0 right-0 h-8 overflow-hidden">
                  <div className="animate-rain h-full">
                    <div className="absolute top-0 left-1/4 w-1 h-4 bg-blue-300 opacity-70"></div>
                    <div className="absolute top-0 left-1/2 w-1 h-3 bg-blue-300 opacity-70"></div>
                    <div className="absolute top-0 left-3/4 w-1 h-5 bg-blue-300 opacity-70"></div>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="col-span-2 grid grid-cols-2 gap-4">
            <div className="bg-gradient-to-br from-red-900/50 to-red-700/30 rounded-xl p-4 border border-red-800/50">
              <div className="flex items-center">
                <span className="text-2xl mr-2">🔥</span>
                <div>
                  <p className="text-gray-300">最高气温</p>
                  <p className="text-2xl font-bold text-red-400">{data.temp_max}°C</p>
                </div>
              </div>
            </div>
            <div className="bg-gradient-to-br from-blue-900/50 to-blue-700/30 rounded-xl p-4 border border-blue-800/50">
              <div className="flex items-center">
                <span className="text-2xl mr-2">❄️</span>
                <div>
                  <p className="text-gray-300">最低气温</p>
                  <p className="text-2xl font-bold text-blue-400">{data.temp_min}°C</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
